<template>
	<view class="">
		<u-popup :show="show" round="12rpx" mode="center" :safeAreaInsetBottom='false'>
			<view class="hint bgf br12 pr">
				<view class="hinta flex_c cf fw500 fs34" :style="[hint_style]">{{hint}}</view>
				<view class="flex_y fw500 fs30 plr24" v-if="title_show">
					<view class="flex1" v-if="$slots.default">
						<slot />
					</view>
					<view class="flex1 tc" :style="[titleColor]" v-else>{{title}}</view>
				</view>
				<view :class="[{'row_everse':against},'hint_btn','flex_btw','fs28']">
					<view class="hint_btna br10 flex_c c23" :style="[cancelColor,brs]" @click="cancel">{{cancel_text}}
					</view>
					<view class="hint_btna br10 flex_c bg23 cf" :style="[bgColor,brs]" @click="affirm">{{confirm_text}}
					</view>
				</view>
				<view class="pa car" v-if="car" @click="carHint">
					<u-icon name="close" bold color="#909090" size="18"></u-icon>
				</view>
			</view>
		</u-popup>
	</view>

	<!-- 使用 
		<hintPopup :show.sync="show" hint='确认修改' title='你确认要修改店铺信息吗？' color="#2A71C0" @confirm='confirm'></hintPopup>
		 说明：确认弹窗
	-->


</template>

<script>
	/*
	 *theme 主题颜色
	 */
	export default {
		props: {
			hint: { //顶部提示文字
				default: "温馨提示",
			},
			hint_color: { //hint颜色
				default: '#333',
			},
			hint_bgcolor: { //hint背景颜色
				default: '#fff',
			},
			title: { //提示内容
				default: "请确认删除？",
			},
			title_color: { //title颜色
				default: '#333',
			},

			title_show: { //是否显示提示内容
				default: true,
			},
			against: { //是否切换 取消 确认 按钮位置
				default: false,
			},
			confirm_text: { //确认按钮文字
				default: "确定",
			},
			cancel_text: { //取消按钮文字
				default: "取消",
			},
			show: { //组件的显示隐藏
				typeof: Boolean,
				default: false,
			},
			color: { //主题颜色
				typeof: String,
				default: '#23D371',
			},
			br: { //按钮圆角
				default: 36,
			},
			car: { //是否线束x按钮
				typeof: Boolean,
				default: false,
			}
		},
		components: {},
		data() {
			return {

			}
		},
		mounted() {

		},
		methods: {
			cancel() { //取消
				this.$emit('update:show', false)
				this.$emit('cancel')
			},
			affirm() { //确定
				this.$emit('confirm')
			},
			carHint() { //点击x关闭
				this.$emit('update:show', false)
				this.$emit('carHint')
			}
		},
		computed: {
			hint_style() {
				return {
					color: this.hint_color,
					background: this.hint_bgcolor
				}
			},
			bgColor() {
				return {
					background: this.color
				}
			},
			titleColor() {
				return {
					color: this.title_color
				}
			},
			cancelColor() {
				return {
					'border-color': this.color,
					color: this.color
				}
			},
			brs() {
				return {
					"border-radius": `${this.br}rpx`
				}
			}
		},
		watch: {}
	}
</script>

<style lang="scss" scoped>
	.hint {
		width: 520upx;
		min-height: 320upx;
		overflow: hidden;

		.hinta {
			padding: 40upx 0;
		}

		.hint_btn {
			margin: 40upx 30upx 30upx 30upx;

			.hint_btna {
				width: 200upx;
				height: 72upx;
				border: 2upx solid #fff;
			}
		}

		.car {
			top: 16upx;
			right: 16upx;
		}

		.row_everse {
			flex-direction: row-reverse;
		}
	}
</style>